<template>
  <div
    style="width: 750px; margin-top: 10px"
    :class="{ hidden: !selfShow }"
    id="bg"
    v-if="myData"
  >
    <div class="main">
      <!--基本信息-->
      <div class="container">
        <span class="title">基本信息</span>
        <div class="d1">
          <span>用户名</span>
          <div class="d2">
            <span>{{ messageData.nickName }}</span>
          </div>
        </div>
        <div class="d1">
          <span>账号</span>
          <div class="d2">
            <span>{{ myData.account }}</span>
          </div>
        </div>
        <div class="d1">
          <span>账户余额</span>
          <div class="d2">
            <span style="color: red">￥{{ messageData.userMoney }}</span>
          </div>
        </div>
      </div>
<div class="container">
        <span class="title">资源费用</span>
        <el-table :data="myData.resourceDetail" border style="width: 100%">
          <el-table-column
            prop="resourceName"
            label="资源名称"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="resourceStatus"
            label="资源状态"
            width="120"
            align="center"
          >
            已购买
          </el-table-column>
          <el-table-column prop="resourceType" label="资源类型" align="center">
            <template slot-scope="scope">
              {{ scope.row.resourceType | typeFilter }}
            </template>
          </el-table-column>
          <el-table-column
            prop="resourcePrice"
            width="100"
            label="资源价格"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <!--总价-->
      <div>
        <hr style="width: 605px; margin-left: 75px" />
        <div class="d1" style="margin-left: 20px; margin-top: 20px">
          <span
            class="s1"
            style="
              margin-left: 66px;
              font-weight: bolder;
              margin-top: 20px;
              font-size: 14px;
              color: #1f1f1f;
            "
            >应付总额:</span
          >
          <span
            style="
              color: red;
              font-size: 20px;
              font-weight: bolder;
              margin-top: 15px;
              margin-left: -240px;
            "
            >¥ {{ getMyTotal }}</span
          >
          <button class="btn4" @click="send">确认订单,去发布</button>
        </div>
        <div style="margin-left: 85px; margin-top: 8px">
          <span style="font-size: 15px; color: #515151"
            >说明：当图书三审通过后自动扣费</span
          >
        </div>
        <div
          style="
            width: 750px;
            height: 1px;
            background: #9a9a9a;
            margin-bottom: 80px;
            margin-top: 30px;
          "
        ></div>
      </div>
    </div>
    <div id="tips" class="tips" :hidden="tips">
      <img :src="resultIcon" />
      <span>{{ msg }}</span>
    </div>
  </div>
</template>

<script>
import ajax from "../../common/ajax";
import api from "../../common/api";
import encryption from "../../common/encryption";
import order from "../../enum/orders/order";

var re = /^[0-9]*[1-9][0-9]*$/;
let myArr = [];
export default {
  name: "AddMountSlot",
  data() {
    return {
      selfShow: true,
      bookNum: 10,
      resourceTotalAmount: 0,
      resourceTotal: 0,
      myData: null,
      radio: "1",
      resultIcon: "../assets/images/icon_error.png",
      msg: "",
      tips: true,
      resourceList: null,
      checked1: false,
      checked2: false,
      priceData: null,
      guidData: null,
      disabled: false,
      priceInfo: null,
      showCommon: false,
      showThird: false,
      showCustom: false,
      showCustomText: false,
      showThirdText: false,
      showCommonText: false,
    };
  },
  computed: {
  },
  beforeCreate() {
    document.querySelector("body").setAttribute("style", "overflow-x:hidden");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },

  created() {
    initResPrice(this);
    this.bookNum = 10;
    this.checked1 = false;
    this.checked2 = false;

    let that = this;

    setTimeout(function () {
      that.myData = {
        bookState: 0,
        bookGuid: "5CFAB00201EE47B5A5593303970612EB",
        account: "fei.weng@mxrcorp.com",
        userId: 2047,
        pressName: "梦想人科技",
        pressId: 1094,
        contacts: "翁绯",
        contactWay: "15195629406",
        projectName: "10sss",
        ebookPageNum: 5,
        ebookPageSize: 998576,
        ttsNum: 2,
        bookNum: 10,
        resourceSize: 4661633,
        resourceNum: 2,
        resourceDetail: [
          {
            resourceId: 14280,
            resourceName: "通用模型（新）",
            resourceNo: "ZY20181219230907847515381968579",
            resourceStatus: 1,
            resourceType: 0,
            resourcePrice: 1,
            resourceSource: 1,
            resourceBelong: 1,
            resourceSize: 4607108,
          },

          {
            resourceId: 14429,
            resourceBelong: 1,
          },
          {
            resourceId: 14429,
            resourceBelong: 1,
          },
          {
            resourceId: 14429,
            resourceBelong: 1,
          },
          {
            resourceId: 14435,
            resourceBelong: 1,
          },
          {
            resourceId: 14393,
            resourceBelong: 4,
          },
        ],
        resourceLocalDetail: [
          {
            resourceName: "4DPicture",
            resourceSize: 4194,
            resourceType: 7,
          },
          {
            resourceName: "TTSPicture",
            resourceSize: 4194,
            resourceType: 7,
          },
        ],
        resourceTTSDetail: [
          {
            resourceName: "TTS_1",
            resourceSize: 46137,
            resourceType: 15,
          },
        ],
        resourceMarkerDetail: [
          {
            resourceName: "P1",
            resourceSize: 286261,
            resourceType: 16,
          },
          {
            resourceName: "P2",
            resourceSize: 234881,
            resourceType: 16,
          },
          {
            resourceName: "P3",
            resourceSize: 283115,
            resourceType: 16,
          },
          {
            resourceName: "P4",
            resourceSize: 304087,
            resourceType: 16,
          },
          {
            resourceName: "P5",
            resourceSize: 241172,
            resourceType: 16,
          },
        ],
      };
    }, 5000);
  },
  mounted() {
    let that = this;
    let models = [];
    let publicModels = [];
    let customizeModels = [];

    if (this.myData.resourceDetail.length !== 0) {
      this.myData.resourceDetail.forEach((el) => {
        if (el.resourceBelong === 3) {
          models.push(el.resourceId);
        } else if (el.resourceBelong === 4) {
          customizeModels.push(el.resourceId);
        } else {
          publicModels.push(el.resourceId);
        }
      });
    }

    let Jsons = {
      userId: this.myData.userId,
      models: models,
      publicModels: publicModels,
      customizeModels: customizeModels,
    };

    ajax.post({
      url:
        api.resourceDetail.routeName +
        api.resourceDetail.children.detail +
        "?r=" +
        Math.random(),
      data: Jsons,
      success(res) {
        that.resourceList = JSON.parse(encryption.decryptionMxr(res)).detail;
        console.log(that.resourceList);

        for (let i = 0; i < that.resourceList.length; i++) {
          let cc = {}; //新对象
          console.log(i);
          cc.resourceName = that.resourceList[i].modelName;
          cc.resourceStatus = that.resourceList[i].authType;
          cc.resourceType = that.resourceList[i].type;
          cc.resourcePrice = that.resourceList[i].priceRange;
          cc.resourceNo = that.resourceList[i].modelNo;
          (cc.resourceSource = that.resourceList[i].resourceType),
            (cc.resourceUseType = that.resourceList[i].resourceUseType);
          myArr.push(cc);

          //获取虚拟价格

          let total = 0;
          let t = 0;
          if (that.resourceList.length !== 0) {
            that.resourceList.forEach((el) => {
              total += el.authType === 2 ? parseInt(el.priceRange) : 0;
              t += parseInt(el.priceRange);
              if (el.resourceType === 4) {
                that.showCustomText = true;
              }
              if (el.resourceType === 2) {
                that.showThirdText = true;
              }
              if (el.resourceType === 1) {
                that.showCommonText = true;
              }
            });
            that.resourceTotalAmount = total.toFixed(2);
            that.resourceTotal = t.toFixed(2);
          }
        }
        console.log(myArr);
      },
      fail(res) {
        alert(JSON.stringify(res) + "失败");
      },
    });

    //获取复选框以及图书册数
    ajax.get({
      url: api.guid.routeName,
      data: {
        bookGuid: this.myData.bookGuid,
      },
      success(res) {
        that.guidData = res;

        if (that.myData.bookState === 1) {
          that.bookNum = 10;
          // that.bookNum = that.guidData.bookNum.toString();
          document
            .getElementById("addInput")
            .setAttribute("readonly", "readonly");

          //获取复选框状态
          that.checked1 = that.guidData.isAuditOneCharged == 0 ? true : false;
          that.checked2 = that.guidData.isAuditTwoCharged == 0 ? true : false;
          that.disabled = true;
          console.log(document.getElementById("checked2"));
        }
      },
    });
  },
  methods: {
    onClose() {
      this.selfShow = false;
    },
    send() {
      console.log(this.myData)
      let that = this;
      let param = {
        userId: this.myData.userId,
        bookGuid: this.myData.bookGuid,
        account: this.myData.account,
        pressId: this.myData.pressId,
        contacts: this.myData.contacts,
        contactWay: this.myData.contactWay,
        projectName: this.myData.projectName,
        bookOrderDetailModelList: myArr,
        resourceLocalDetail: this.myData.resourceLocalDetail,
        resourceMarkerDetail: this.myData.resourceMarkerDetail,
        resourceTTSDetail: this.myData.resourceTTSDetail,
        ebookPageSize: this.myData.ebookPageSize,
        resourceSize: this.myData.resourceSize,
        bookNum: this.bookNum,
        ttsNum: this.myData.ttsNum,
        isProcessBook: parseInt(this.radio),
        ebookPageNum: this.myData.ebookPageNum,
        resourceNum: this.myData.resourceNum,
        resourceTotalAmount: this.resourceTotalAmount,
        storageTotalAmount: 11,
        cdnTotalAmount: 11,
        ttsTotalAmount: 11,
        processBookTotalAmount: 11,
        totalAmount: 11,
        payableAmount: 11,
        isAuditOneCharged: 11,
        isAuditTwoCharged: 112,
        onlineServiceAmount: 11,
        bookAuditTotalAmount: 11,
      };
      if (this.bookNum == "") {
        this.msg = "图书发行数量不为空";
        this.resultIcon = require("../../assets/images/icon_error.png");
        this.tips = false;
        setTimeout(function () {
          that.tips = true;
        }, 1500);
      } else if (!re.test(this.bookNum)) {
        alert("只能输入大于0");
      } else {
        console.log(param);
        ajax.post({
          url:
            api.orders.routeName +
            api.orders.children.book +
            "?t=" +
            new Date().getTime(),
          data: param,
          success(res) {
            that.msg = "提交成功";
            that.resultIcon = require("../../assets/images/icon_error.png");
            that.tips = false;
            setTimeout(function () {
              that.tips = true;
            }, 1500);
          },
          fail(res) {
            alert("提交失败");
          },
        });
      }
    },
  },
};

//获取guid
function getGuid(guid, that) {
  ajax.get({
    url: api.guid.routeName,
    data: {
      bookGuid: guid,
    },
    success(res) {
      that.guidData = res;
    },
  });
}

/**
 * 初始化价格
 *
 * @param that VUE对象
 */
function initResPrice(that) {
  ajax.get({
    url: api.resourceDetail.routeName + api.resourceDetail.children.price,
    encryption: true,
    success(res) {
      that.priceInfo = res;
    },
  });
}
</script>

<style scoped>
h2 {
  font-size: 30px;
  margin-left: 310px;
  color: white;
  letter-spacing: 3px;
}

.s1 {
  font-size: 26px;
  margin-left: 250px;
  color: white;
  margin-top: 5px;
}

.s1:hover {
  cursor: pointer;
}

.hidden {
  display: none;
}

#bg {
  border-radius: 10px;
  border: 1px solid #979797;
  background: #ffffff;
}

.btn3 {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 3px;
  background: white;
  font-size: 14px;
  color: #f5a623;
}

.btn4 {
  width: 149px;
  height: 40px;
  background: #4a90e2;
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 14px;
  margin-right: 70px;
  margin-top: 8px;
}

.btn3:hover {
  cursor: pointer;
}

.btn4:hover {
  cursor: pointer;
}

.top {
  height: 55px;
  background: #4381e6;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding-top: 25px;
}

::-webkit-scrollbar {
  display: none;
}

.title {
  font-size: 20px;
  font-weight: bolder;
  display: block;
}

.container {
  width: 600px;
  margin: 25px auto;
}

.d1,
.d3,
.d4 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 14px;
  margin-left: 10px;
}

.d2 {
  width: 330px;
  text-align: center;
}

.s4 {
  font-size: 16px;
  font-weight: bolder;
}

.s2,
.s3 {
  font-size: 16px;
  font-weight: bolder;
}

.d4 {
  width: 450px;
  margin-left: 140px;
}

.d5 {
  width: 100px;
  text-align: center;
  margin-top: 10px;
}

.d6 {
  width: 69px;
  text-align: center;
  margin-top: 10px;
}

.d7 {
  width: 170px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.d8 {
  display: flex;
  flex-direction: row;
}

.myInput {
  border: none;
  padding-left: 10px;
  width: 130px;
}

.tips {
  background: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  position: fixed;
  top: 0;
  left: 40%;
  width: auto;
  height: 65px;
  z-index: 99;
}

.tips img {
  width: 30px;
  height: 30px;
  position: relative;
  margin-top: 18px;
  margin-left: 66px;
}

.tips span {
  font-size: 15px;
  color: #3c3c3c;
  letter-spacing: -0.05px;
  line-height: 16px;
  display: inline-block;
  position: relative;
  top: -8px;
  margin-left: 13px;
  padding-right: 66px;
}

.d15 {
  width: 200px;
}

.d26 {
  width: 170px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.s4:hover {
  cursor: pointer;
}
</style>
